<template>
    <el-scrollbar class="g-height100 scroll-bar-view"
                  v-loading="funcDataLoading"
                  style="background-color: #304156;"
                  element-loading-background="#304156"
                  wrapStyle="overflow:auto;"

    >
        <el-menu
                :default-openeds="defaultActive"
                class="g-height100"
                background-color="#304156"
                text-color="#fff"
                active-text-color="#ffd04b"
        >
            <template v-for="(item,index) in funcData">
                <nav-sub-menu v-if="item.children && item.children.length > 0" :item="item" :key="index"></nav-sub-menu>
                <nav-menu-item v-else-if="item.node.typeDictCode == 'page'" :item="item" :key="index"></nav-menu-item>
            </template>
        </el-menu>
    </el-scrollbar>

</template>
<script>
    import NavMenuItem from './NavMenuItem.vue'
    import NavSubMenu from './NavSubMenu.vue'
    import storage from '../../../../common-util/src/tools/StorageTools.js'
    export default {
        name: 'Aside',
        components: {
            NavMenuItem,
            NavSubMenu
        },
        computed:{
            // 默认激活的左侧导航菜单
            defaultActive(){
                if(this.funcData && this.funcData.length > 0){
                    return ['' + this.funcData[0].node.id]
                }
                return ['']
            }
        },
        data () {
            return {
                funcData: [],
                funcDataLoading: false
            }
        },
        mounted () {
            this.getFuncData()
            this.bindGetFuncDataBus()
        },
        updated(){
        },
        activated(){
        },
        beforeRouteEnter(to, from, next){
            next()
        },
        methods: {
            bindGetFuncDataBus(){
                this.$bus.$on('getFuncData',this.getFuncData)
            },
            getFuncData(){
                this.funcDataLoading = true
                // 获取当前选中的应用，数据结构同后台应用vo
                let currentApplication = storage.get('currentApplication')
                this.axios.get(this.$baseURL.base +  '/base/func/tree/nav',{params:{
                    applicationId:currentApplication?currentApplication.id:null
                    }})
                    .then(res =>{
                        this.funcData = res.data
                    })
                    .catch(error =>{
                        if(error.response){
                            if(error.response.status == 401){
                                return
                            }
                            this.$message.error(error.response.data.msg)
                        }else {
                            this.$message.error('网络错误或服务不可用')
                        }
                    }).finally(()=>{
                    this.funcDataLoading = false
                })
            }
        },
        watch: {

        }
    }
</script>
<style scoped>
</style>
<style>
    .scroll-bar-view .el-scrollbar__view{
        overflow: hidden;
    }
    .scroll-bar-view .el-submenu__title{
        width: 199px;
    }
</style>